<html>

<head>
    <title>用户首页</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        #outer {
            margin-top: 60px;
        }

        #outer td,
        #outer th {
            border: 1px solid #ccc;
            font-family: "American Typewriter";

        }

        #outer table {
            margin: auto;
            box-shadow: 2px -2px 4px #999;
            border-collapse: collapse;
        }

        #outer td,
        #outer th {
            text-align: center;
            width: 120px;
            height: 32px;
        }

        #title {
            padding-top: 5px;
            color: white;
            text-shadow: 2px 2px 0px #000;
            font-size: 35px;
        }

        #outer table tr:hover {
            background-color: red;
        }

        #outer table tr:hover td {
            color: white;
        }

        #btn button:hover {
            background-color: red !important;
        }
    </style>
</head>

<body>
<div id="page1"></div>

    <div style="width: 600px;margin: auto">
        <input type="text" value="" id="search" placeholder="根据用户名搜索"
            style="padding: 5px;height: 35px;width: 250px;border-radius: 5px;border: 1px solid deepskyblue">
        <button type="button" onclick="searchName()"
            style="margin-left: -5px;color: white;border-radius: 5px;border: 0;width: 100px;height: 35px;background-color:red">Search</button>
    </div>
    <div id="outer">
        <table>
            <thead>
                <tr>
                    <th colspan="5">
                        <h2 id="title">用户档案</h2>
                    </th>
                </tr>
                <tr>
                    <th><input type="checkbox" onclick="checkAll(this)"></th>
                    <th>序号</th>
                    <th>用户名</th>
                    <th>邮箱</th>
                    <th>角色</th>
                    <c:if test="${user.power==0}">
                        <th>操作选项</th>
                    </c:if>
                </tr>
            </thead>
            <tbody id="users">

            </tbody>
            <button type="button" onclick="delSome()"
            style="margin-left: -5px;color: white;border-radius: 5px;border: 0;width: 100px;height: 35px;background-color:red">批量删除</button>
        </table>
    </div>
    <div id="btn">
        <p style="text-align: center">
            <input type="hidden" id="currentPage" value=1>
            <button type="button" id="prepage"
                style="color: white;border-radius: 2px;border: 0;width: 100px;height: 35px;background-color:deepskyblue" onclick="prePage()">←上一页</button>
            <button type="button" id="nextpage"
                style="color: white;border-radius: 2px;border: 0;width: 100px;height: 35px;background-color:deepskyblue" onclick="nextPage()">下一页→</button>
        </p>
    </div>
	<div id="page2"></div>

    <script src="../../plugins/jquery/jquery-3.6.0.js"></script>

    <script>
        var currentPage=1;
            var isFirstPage=true;
            var isLastPage=false;
        $(function () {
		$("#page1").load("../common/nav.html");
        $("#page2").load("../common/footer.html");
            // var currentPage=1;
            // var isFirstPage=true;
            // var isLastPage=false;
            $.get('http://localhost:88/hayabusa/user/userList', function (result) {
                $('#prepage').show();
                $('#nextpage').show();
                let arr = result.object.list;
                currentPage=result.object.pageNum;
                isFirstPage=result.object.hasPreviousPage;
                isLastPage=result.object.hasNextPage;


                document.getElementById("currentPage").value=currentPage;
                //js操作dom
                let str = "";
                for (let i = 0; i < arr.length; i++) {
                    str += "<tr>";
                    str += "<td><input type='checkbox' name='checkbox' value=\"" + arr[i].id + "\"></td>";
                    str += "<td>" + (i + 1) + "</td>";
                    str += "<td>" + arr[i].userName + "</td>";
                    str += "<td>" + arr[i].email + "</td>";
                    if (arr[i].power == 0) {
                        str += "<td>超级管理员</td>"
                    } else {
                        str += "<td>普通人员</td>"
                    }
                    str += "<td><button type='button' onclick='del(this," + arr[i].id + ")' style='margin-left: -5px;color: white;border-radius: 5px;border: 0;width: 50px;height: 17px;background-color:red'>删除</button>"
                    str+="<button type='button' onclick=\"focusUser(this,"+arr[i].email+")\"  style='margin-left: -5px;color: white;border-radius: 5px;border: 0;width: 50px;height: 17px;background-color:red'>关注</button></td>"
                    str += "</tr>";
                }
                $("#users").html(str);
            })
        });
    </script>


    <script>
        function searchName() {
            var name=$('#search').val();
            alert(name);
            if(name==""){
                $.get('http://localhost:88/hayabusa/user/userList', function (result) {
                let arr = result.object.list;
                currentPage=result.object.pageNum;
                isFirstPage=result.object.hasPreviousPage;
                isLastPage=result.object.hasNextPage;


                document.getElementById("currentPage").value=currentPage;
                //js操作dom
                let str = "";
                for (let i = 0; i < arr.length; i++) {
                    str += "<tr>";
                    str += "<td><input type='checkbox' name='checkbox' value=\"" + arr[i].id + "\"></td>";
                    str += "<td>" + (i + 1) + "</td>";
                    str += "<td>" + arr[i].userName + "</td>";
                    str += "<td>" + arr[i].email + "</td>";
                    if (arr[i].power == 0) {
                        str += "<td>超级管理员</td>"
                    } else {
                        str += "<td>普通人员</td>"
                    }
                    str += "<td><button type='button' onclick='del(this," + arr[i].id + ")' style='margin-left: -5px;color: white;border-radius: 5px;border: 0;width: 50px;height: 17px;background-color:red'>删除</button>"
                    str+="<button type='button' onclick=\"focusUser(this,"+arr[i].email+")\"  style='margin-left: -5px;color: white;border-radius: 5px;border: 0;width: 50px;height: 17px;background-color:red'>关注</button></td>"
                    str += "</tr>";
                }
                $("#users").html(str);
            })
            }
            else{
                $.ajax({
                url: "http://localhost:88/hayabusa/user/findInSolr",
                data: {name:name},
                success: function (result) {
                    $('#prepage').hide();
                    $('#nextpage').hide();
                    let arr = result.object;
                //js操作dom
                let str = "";
                for (let i = 0; i < arr.length; i++) {
                    str += "<tr>";
                    str += "<td><input type='checkbox' name='checkbox' value=\"" + arr[i].id + "\"></td>";
                    str += "<td>" + (i + 1) + "</td>";
                    str += "<td>" + arr[i].userName + "</td>";
                    str += "<td>" + arr[i].email + "</td>";
                    if (arr[i].role == 0) {
                        str += "<td>超级管理员</td>"
                    } else {
                        str += "<td>普通人员</td>"
                    }
                    str += "<td><button type='button' onclick='del(this," + arr[i].id + ")' style='margin-left: -5px;color: white;border-radius: 5px;border: 0;width: 50px;height: 17px;background-color:red'>删除</button>"
                    str+="<button type='button' onclick=\"focusUser(this,"+arr[i].email+")\"  style='margin-left: -5px;color: white;border-radius: 5px;border: 0;width: 50px;height: 17px;background-color:red'>关注</button></td>"
                    str += "</tr>";
                }
                $("#users").html(str);
                }
            })
            }
            
           

        }
        //异步删除
        function del(obj, id) {
            //ajax请求将数据发送到后台... - delete请求
            //除了发送get,post请求,其余的请求delete/put,采用jquery原生的ajax代码
            $.ajax({
                type: "delete",
                url: "http://localhost:88/hayabusa/user/del",
                data: "id=" + id,
                success: function (result) {
                    if (result.code = "200") {
                        //obj是属于js对象
                        //js对象转换成jquery对象
                        let tr = $(obj).parent().parent();
                        tr.remove();
                    }
                }
            })
        }
        // 批量删除
        function delSome() {
            var checkboxs = document.getElementsByName("checkbox");
            var check_val = [];
            for (k in checkboxs) {
                if (checkboxs[k].checked)
                    check_val.push(checkboxs[k].value);
            }
            $.ajax({
                type: "delete",
                url: "http://localhost:88/hayabusa/user/delSome",
                data: "ids=" + check_val,
                success: function (result) {
                    if (result.code = "200") {
                        //obj是属于js对象
                        //js对象转换成jquery对象
                        var trs =[];
                        for(let s=0;s<checkboxs.length;s++){ 
                            
                            if (checkboxs[s].checked) {
                                var tr= checkboxs[s];
                                trs.push(tr);
                            }
                            
                         } 
                         for(let i=0;i<trs.length;i++){
                                var tr =$(trs[i]).parent().parent();
                                tr.remove();
                            }
                        


                    }
                }
            })
        }

        //关注此人
        function focusUser(obj,email) {
            //ajax请求将数据发送到后台... - delete请求
            //除了发送get,post请求,其余的请求delete/put,采用jquery原生的ajax代码
            $.ajax({
                url: "http://localhost:88/hayabusa/user/focus",
                data: "email=" + email,
                type:"post",
                success: function (result) {
                    alert(result.msg);
                    if (result.code = "200") {
                        //obj是属于js对象
                        //js对象转换成jquery对象
                        $(obj).text="已关注";
                    }
                    if(result.code = "201") {
                        //obj是属于js对象
                        //js对象转换成jquery对象
                        $(obj).text="取消关注";
                    }
                }
            })
        }

        // 全选与反选
        function checkAll(obj) {
            if (obj.checked == true) {
                checkboxed("checkbox")

            }
            else {
                // alert(obj.checked)
                uncheckboxed("checkbox")

            }

        }
        function checkboxed(objName) {
            var objNameList = document.getElementsByName(objName);

            if (null != objNameList) {
                // alert("全选操作");
                for (var i = 0; i < objNameList.length; i++) {
                    objNameList[i].checked = "checked";
                }
            }
        }

        function uncheckboxed(objName) {
            var objNameList = document.getElementsByName(objName);

            if (null != objNameList) {
                // alert("取消全选操作");
                for (var i = 0; i < objNameList.length; i++) {
                    objNameList[i].checked = "";
                }
            }
        }
        function prePage(){
            
            var prePage=currentPage;
            if(isFirstPage){
                prePage-=1;
            }
            $.ajax({
                url: "http://localhost:88/hayabusa/user/userList",
                data: "pageNo="+prePage,
                success: function (result) {
                    $('#prepage').show();
                    $('#nextpage').show();
                    let arr = result.object.list;
                    currentPage=result.object.pageNum;
                isFirstPage=result.object.hasPreviousPage;
                isLastPage=result.object.hasNextPage;

                document.getElementById("currentPage").value=currentPage;
                //js操作dom
                let str = "";
                for (let i = 0; i < arr.length; i++) {
                    str += "<tr>";
                    str += "<td><input type='checkbox' name='checkbox' value=\"" + arr[i].id + "\"></td>";
                    str += "<td>" + (i + 1) + "</td>";
                    str += "<td>" + arr[i].userName + "</td>";
                    str += "<td>" + arr[i].email + "</td>";
                    if (arr[i].power == 0) {
                        str += "<td>超级管理员</td>"
                    } else {
                        str += "<td>普通人员</td>"
                    }
                    str += "<td><button type='button' onclick='del(this," + arr[i].id + ")' style='margin-left: -5px;color: white;border-radius: 5px;border: 0;width: 50px;height: 17px;background-color:red'>删除</button>"
                    str+="<button type='button' onclick=\"focusUser(this,"+arr[i].email+")\" style='margin-left: -5px;color: white;border-radius: 5px;border: 0;width: 50px;height: 17px;background-color:red'>关注</button></td>"
                    str += "</tr>";
                }
                $("#users").html(str);
                }
            })

           
            

        }
        function nextPage(){
            var nextPage=currentPage;
            if(isLastPage){
                nextPage+=1;
            }

            $.ajax({
                url: "http://localhost:88/hayabusa/user/userList",
                data: "pageNo="+nextPage,
                success: function (result) {
                    $('#prepage').show();
                    $('#nextpage').show();
                    let arr = result.object.list;
                    currentPage=result.object.pageNum;
                isFirstPage=result.object.hasPreviousPage;
                isLastPage=result.object.hasNextPage;

                document.getElementById("currentPage").value=currentPage;
                //js操作dom
                let str = "";
                for (let i = 0; i < arr.length; i++) {
                    str += "<tr>";
                    str += "<td><input type='checkbox' name='checkbox' value=\"" + arr[i].id + "\"></td>";
                    str += "<td>" + (i + 1) + "</td>";
                    str += "<td>" + arr[i].userName + "</td>";
                    str += "<td>" + arr[i].email + "</td>";
                    if (arr[i].power == 0) {
                        str += "<td>超级管理员</td>"
                    } else {
                        str += "<td>普通人员</td>"
                    }
                    str += "<td><button type='button' onclick='del(this," + arr[i].id + ")' style='margin-left: -5px;color: white;border-radius: 5px;border: 0;width: 50px;height: 17px;background-color:red'>删除</button>"
                    str+="<button type='button' onclick=\"focusUser(this,"+arr[i].email+")\"  style='margin-left: -5px;color: white;border-radius: 5px;border: 0;width: 50px;height: 17px;background-color:red'>关注</button></td>"
                    str += "</tr>";
                }
                $("#users").html(str);
                }
            })
        }

    </script>
</body>

</html>